<?php
    $this->layout('base.phtml', [
        'title' => _('Note edition'),
        'canonical' => url_full('edit note', ['id' => $note->id]),
        'has_errors' => $form->isInvalid(),
        'modal_enabled' => true,
    ]);
?>

<div class="section section--small">
    <div class="section__title">
        <h1 id="modal-title"><?= _('Note edition') ?></h1>
    </div>

    <form
        data-turbo-preserve-scroll
        method="post"
        action="<?= url('update note', ['id' => $note->id]) ?>"
        data-controller="autosave"
        data-action="turbo:submit-start@document->autosave#clear"
    >
        <?= $this->include('alerts/_error.phtml', ['message' => $form->error('@base')]) ?>

        <div class="form-group">
            <label for="content">
                <?= _('Your note') ?>
            </label>

            <?php if ($form->isInvalid('content')): ?>
                <p id="content-error" class="form-group__error">
                    <?= _('Error:') ?>
                    <?= $form->error('content') ?>
                </p>
            <?php endif; ?>

            <textarea
                id="content"
                name="content"
                required
                data-controller="text-editor"
                data-action="text-editor#refresh keyup->autosave#save"
                aria-describedby="content-caption"
                <?php if ($form->isInvalid('content')): ?>
                    aria-errormessage="content-error"
                    aria-invalid="true"
                <?php endif; ?>
            ><?= protect($form->content) ?></textarea>

            <p id="content-caption" class="form-group__caption">
                <?= _('You can format the content in Markdown and use #tags.') ?>
            </p>
        </div>

        <div class="form__actions">
            <button type="submit" class="button--primary">
                <?= _('Save changes') ?>
            </button>
        </div>

        <input type="hidden" name="csrf_token" value="<?= csrf_token($form) ?>" />
    </form>
</div>
